<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            var all = document.getElementById("all");//DOM对象
            var inputs = document.querySelectorAll("tbody input");//集合
            //给全选按钮绑定点击事件
            all.onclick = function () {
                if (all.checked) {
                    for (var i = 0; i < inputs.length; i++) {
                        inputs[i].checked = true;
                    }

                } else {
                    for (var i = 0; i < inputs.length; i++) {
                        inputs[i].checked = false;
                    }
                }
            };
            
            //给tbody中的每个input绑定事件
            for(var i=0;i<inputs.length;i++){

             
                inputs[i].onclick=function(){
                    var count=0;

                    //重头到尾找一遍tbody中的input被选中的个数
                    for(var j=0;j<inputs.length;j++){
                        if(inputs[j].checked){//如果被选中
                            count++;
                        }
                    }
                    console.log(count);
                    //如果被选中的个数和tbody中的input个数相同，说明全部被选中的
                    if(count==inputs.length){
                        all.checked=true;
                    }else{
                        all.checked=false;
                    }

                };
            }









        };



    </script>
</head>

<body>
    <table border="1" width="500">
        <thead>
            <tr>
                <th><input type="checkbox" id="all">全选</th>
                <th>th02</th>
                <th>th03</th>
                <th>th04</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td><input type="checkbox"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>td02</td>
                <td>td03</td>
                <td>td04</td>
            </tr>
        </tbody>
    </table>
</body>

</html>